<template>
  <div id="app">
    <router-view />
  </div>
</template>

<style lang="scss">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
</style>
<script>
import { mapActions, mapMutations, mapState } from "vuex";
// 保存 client_id  到本地的会话
import { setClientId, getClientId, getToken } from "@/utils/auth";
import { bindMembeId, unbindMembeId } from "@/api/index";
import socketMixins from "@/socket/sockerMixins";

export default {
  mixins: [socketMixins],
  data() {
    return {
      ws: void 0, // ws链接
    };
  },
  beforeDestroy() {
    // 销毁时关闭链接
    if (getToken()) {
      this.closeWebSocket();
    }
  },
  mounted() {
    // 创建客户端的WebSocket对象并保存client_id
    if (getToken()) {
      this.conn();
    }
    let width = document.body.clientWidth;
    if (width >= 1200) {
      let fontsize = (width / 1920) * 40; //fontsize为当前屏幕的基数字体，相对于设计稿计算得到的。
      document.documentElement.style.fontSize = `${fontsize}px` + "px";
    } //当加载页面的时候设置生效
    window.onresize = () => {
      //当页面尺寸改变的时候生效
      return (() => {
        let width = document.body.clientWidth;
        if (width >= 1200) {
          let fontsize = (width / 1920) * 40;
          document.documentElement.style.fontSize = `${fontsize}px` + "px";
        }
      })();
    };
  },
  methods: {
    ...mapMutations("user", ["setWs"]),
    // //关闭WebSocket连接，关闭后重连，保持最少一个长连接存在，退出后关闭
    async closeWebSocket() {
      this.ws.close();
      this.conn();
    },
    // //发送消息
    // // send() {
    // //   this.ws.send();
    // // },
    // // 发起scoket链接
    async conn() {
      const that = this;
      // 解绑loginIndex中的长链接
      await unbindMembeId({ client_id: getClientId().client_id });
      let wsURL =
        process.env.NODE_ENV == "development"
          ? "ws://worker.e-kc.com:2348"
          : "wss://worker.e-kc.vip:2348";

      this.ws = new WebSocket(wsURL);
      this.setWs(this.ws);
      //连接成功建立的回调方法
      this.ws.onopen = function () {
        console.log("app链接成功");
      };
      //   接收信息
      this.ws.onmessage = async function (message) {
        if (JSON.parse(message.data).client_id) {
          setClientId({ client_id: JSON.parse(message.data).client_id });
          if (getToken()) {
            await bindMembeId({
              client_id: JSON.parse(message.data).client_id,
            });
          }
        }
        //   不同的类型执行不同的操作
        switch (JSON.parse(message.data).notice_type) {
          case "cp_shop":
            that.showNotify(JSON.parse(message.data));
            break;
          case "news":
            that.showMessage(JSON.parse(message.data));
            break;
          case "system":
            that.showSystem(JSON.parse(message.data));
            break;
          case "order":
            that.submitData(JSON.parse(message.data));
            break;
          case "order_error":
            that.resultData(JSON.parse(message.data));
            break;
          case "order_enter":
            that.resultData(JSON.parse(message.data));
            break;
          case "up_cp_product":
            that.submitData(JSON.parse(message.data));
            break;
          case "cp_product_enter":
            that.resultData(JSON.parse(message.data));
            break;
        }
        // }
        // if (
        //     JSON.parse(message.data).status === 411 ||
        //     JSON.parse(message.data).status === 200
        // ) {
        //   // 判断type执行相对应的操作
        //   //that.searchData.shop_id 执行脚本后推送过来的数据
        //   // that.getSock(message)
        // }
      };

      //连接发生错误的回调方法
      this.ws.onerror = function () {
        console.log("WebSocket连接发生错误");
      };
      //发送信息
      this.ws.send = function () {
        console.log("像服务端发送信息");
      };
      //连接关闭的回调方法
      this.ws.onclose = function () {
        console.log("WebSocket连接关闭app");
      };
    },
  },
};
</script>
